<template>
    <!-- 图书馆 -->
    <div class="app-container">
        <SideMenu :menus="this.menus"/>
        <Books class="books-area"/>
    </div>
</template>

<script>
    import Books from './Books'
    import SideMenu from '../menu/SideMenu'

    export default {
        components: { Books, SideMenu },
        data () {
            return {
                menus: [
                    {
                        id: 0,
                        name: '全部',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 1,
                        name: '文学',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 2,
                        name: '流行',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 3,
                        name: '文化',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 4,
                        name: '生活',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 5,
                        name: '经管',
                        icon: 'el-icon-menu'
                    },
                    {
                        id: 6,
                        name: '科技',
                        icon: 'el-icon-menu'
                    }
                ]
            }
        },
        methods: {

        }
    }
</script>

<style scoped>
    .app-container {
        margin-top: 20px;
    }
    .books-area {
        width: 990px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

